import React from 'react';


import classnames from 'classnames';
//component
import ReButton from 'components/widgets/ReButton';

import './index.less';


export default class view extends React.Component {
    static propTypes = {
        //name: React.PropTypes.string,
    };

    static defaultProps = {
        //name: 'component name'
    };


    constructor(props, context) {

        super(props, context);


        // init state;
        this.state = {};
    }

    componentWillMount() {
        this._isMounted = true;

    }

    componentDidMount() {

    }

    componentWillUnmount() {
        this._isMounted = false;
    }

    render() {
        const {closeHandle, visible} = this.props;

        const maskClass = classnames({
            'public-guide-mask': true,
            'fade-in': visible,
            'fade-out': !visible
        });

        return (
            <div className="orin-w-publicguide-root">
                <div className={maskClass}>
                    <div className="public-guide-wrapper">
                        <div className="public-guide-content">
                            <div className="public-content-left">
                                <img className="left-image"
                                     src="/assets/images/components/widgets/PublicGuide/images/left_image.png" alt=""/>
                            </div>
                            <div className="public-content-right">
                                <div className="right-content">
                                    <img className="qr-code"
                                         src="/assets/images/components/widgets/PublicGuide/images/qr_code.png" alt=""/>
                                    <p className="text pc">扫描二维码</p>
                                    <p className="text phone">长按扫描二维码</p>
                                    <p className="text">开始体验</p>
                                </div>

                            </div>
                        </div>
                        <div className="public-guide-footer">
                            <ReButton label="我知道了" onClick={() => closeHandle && closeHandle()}
                                      className="confirm-btn"/>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}
